<template>
  <view class="task-center">
    <navBar :navbarData.sync="navbarData"></navBar>
    <loading :showLoaded.sync="showLoaded"></loading>
    <view class="task-container">
      <view class="times">
        <view class="task-record" @click="skipRecord">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/task1.png"></image>
          <text>任务记录</text>
        </view>
        <view class="time-data">
          <view class="content">
            <view class="text">已获取次数</view>
            <view class="num">{{drawTotalTimes}}</view>
          </view>
          <view class="content">
            <view class="text">剩余次数</view>
            <view class="num">{{drawRemainingTimes}}</view>
          </view>
          <view class="content">
            <view class="text">已使用次数</view>
            <view class="num">{{drawUsedTimes}}</view>
          </view>
        </view>
        <view class="tip" v-if="taskInfo && tipText">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/task3.png"></image>
          {{tipText}}
        </view>
      </view>
      <view class="task-list">
        <view class="title">
          <view class="top">
            <text class="left">不凡甄选任务</text>
            <text class="right" @click="skipTaskRule">任务规则</text>
          </view>
          <view class="bottom">
            <text>任务时间：{{startTime}}-{{endTime}}</text>
          </view>
        </view>
        <view v-for="(item,index) in taskList" :key="index" class="list-content">
          <view class="left">
            <image :src="item.uploadIcon" mode="widthFix"></image>
          </view>
          <view class="center">
            <view class="task-name">{{item.taskContentName}}</view>
            <view class="task-des" v-if="item.taskContentType !== 'InviteFriends'">
              <text v-if="item.taskContentType !== 'InviteHelp'">{{item.taskContentStatement}}</text>
              <text
                v-else>已成功邀请{{item.achieveCount>item.executionTotals?item.executionTotals:item.achieveCount}}/{{item.executionTotals}}</text>
            </view>
            <view class="friend-list" v-else>
              <view class="avatar-icon" v-for="(aitem,aindex) in friendList" :key="aindex">
                <image :src="aitem" v-if='aindex<item.executionTotals'></image>
              </view>
              <view class="empty" v-for="(emitem,emindex) in (item.executionTotals - friendList.length)" :key="index">
                <image src='https://100000063-1252208446.file.myqcloud.com/images/emptyadd.png'></image>
              </view>
            </view>
          </view>
          <view class="right">
            <button class="task-operate"
              v-if="item.taskContentStatus == 3 && (item.taskContentType == 'InviteFriends' || item.taskContentType == 'ShareMini'||item.taskContentType == 'InviteHelp')"
              :open-type="openType" :data-type="item.taskContentType" :data-taskContentId="item.taskContentId"
              :data-taskContentName='item.taskContentName' :data-path='item.path' @click="shareCard">去完成</button>
            <view v-else class="task-operate" @click="handleTask(item)" :class="item.buttonColor">
              <text>{{item.buttonText}}</text>
            </view>
          </view>
        </view>
      </view>
      <view style="width: 100%;  min-height: 200rpx;flex: 1;"></view>
      <view class="footer " :class="[isIpx ? 'fix-iphonex-button' : '']">
        <view class="footer_btn" @click="skipDraw">即刻参与不凡甄选活动</view>
      </view>
    </view>
    <view class="topView" @touchmove.stop.prevent catchtouchmove="true" v-if="showDialog">
      <view class="container">
        <view class="close" @click="closeDialogBox('关闭')">×</view>
        <view class="text">任务尚未开始，请留意不凡甄选活动时间</view>
        <view class="checkBtnBox">
          <view class="btn submit" @click="closeDialogBox('确认')">确认</view>
        </view>
      </view>
    </view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script>
  import api from '@/api/api';
  import NavBar from '@/components/common/navbar';

  import Loading from '@/components/common/loading';
  import cmsMethods from '@/utils/cmsItems.js';

  import util from '@/utils/util.js';
  import {
    SYSTEM_INFO,
    USER_INFO,
    CUSTOMER_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  import {
    nextTick
  } from "vue";
  export default {
    components: {
      navBar: NavBar,
      loading: Loading,
    },
    data() {
      return {
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '任务中心',
          hideSearch: true,
          hideHome: false,
        },
        drawRemainingTimes: 0,
        drawTotalTimes: 0,
        drawUsedTimes: 0,
        taskList: [],
        friendList: [],
        startTime: '',
        endTime: '',
        taskInfo: {},
        taskCenterCode: '',
        sceneCode: '',
        shareImage: '',
        shareTitle: '',
        shareFriendImage: '',
        shareFriendTitle: '',
        showDialog: false,
        showLoaded: true,
        tipText: '本场不凡甄选活动结束后参与次数自动清零',
        shareHelpImage: '',
        shareHelpTitle: '',
        shareDefaultImage: '',
        shareDefaultTitle: '',
        openType: 'share',
        isIpx: false,
        previewpage: '',
        prevpagetitle: '',
        taskStatus: '', //活动状态
      }
    },
    onLoad(options) {
      let systemInfo = uni.getSystemInfoSync();
      let pages = getCurrentPages();
      this.isCurrentPage = pages[pages.length - 1].route;
      let prevpage = pages[pages.length - 2];
      if (prevpage == undefined) {

      } else {
        this.previewpage = prevpage.route ? prevpage.route : '';
      }
      this.prevpagetitle = !!options.title ? options.title : '';

      let isIpx = systemInfo.model.indexOf('iPhone X') !== -1 || systemInfo.model.indexOf('iPhone1') !== -1 ||
        systemInfo.model.indexOf('unknown<iPhone13') !== -1 || systemInfo.model.indexOf('iPhone 12/13') !== -1;
      this.isIpx = isIpx;
      this.setInitTaskCenter()
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
      // 分享小程序
      cmsMethods.getCMSPageInfo('cms/shareMiniTask', merchantInfo.cloudMerchantId, merchantInfo
        .cloudMerchantStoreId).then(res => {
        this.shareImage = res && res.shareImage,
          this.shareTitle = res && res.shareTitle
      })
      // 邀请好友入会
      cmsMethods.getCMSPageInfo('cms/shareInviteFriendTask', merchantInfo.cloudMerchantId, merchantInfo
        .cloudMerchantStoreId).then(res => {
        this.shareFriendImage = res && res.shareImage,
          this.shareFriendTitle = res && res.shareTitle
      })
      // 邀请好友助力
      cmsMethods.getCMSPageInfo('cms/shareInviteHelpTask', merchantInfo.cloudMerchantId, merchantInfo
        .cloudMerchantStoreId).then(res => {
        this.shareHelpImage = res && res.shareImage,
          this.shareHelpTitle = res && res.shareTitle
      })
      // 默认卡片转发
      cmsMethods.getCMSPageInfo('cms/shareTaskCenter', merchantInfo.cloudMerchantId, merchantInfo
        .cloudMerchantStoreId).then(res => {
        this.shareDefaultImage = res && res.shareImage,
          this.shareDefaultTitle = res && res.shareTitle
      })
    },
    onShow() {
      this.getTaskInfo()

    },
    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      // 初始化任务中心
      async setInitTaskCenter() {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let memberDetails = uni.getStorageSync('memberDetails');
        const res = await api.setTaskInit({
          method: 'POST',
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            memberId: memberDetails.memberId,
            memberLevelId: memberDetails.memberLevelId,
            mobile: customerInfo.mobile
          }
        });
        if (res.code === 1000) {}
      },
      closeDialogBox(type) {
        this.showDialog = false
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '抽签任务', 'popup_name': '抽签任务未开始', 'button_name': type})
      },
      async getTaskInfo() {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const res = await api.getTaskInfo({
          method: 'GET',
          header: {
            jwt: customerInfo.jwt
          },
        })
        if (res.code === 1000) {
          let taskContentId = ''
          if (!res.data) {
            return false
          }
          this.drawRemainingTimes = res.data.drawRemainingTimes
          this.drawTotalTimes = res.data.drawTotalTimes
          this.drawUsedTimes = res.data.drawUsedTimes
          let nowTime = new Date().getTime()
          if (!res.data.contentList) {
            this.showLoaded = false
            return false
          }
          let opentime = new Date(res.data.contentList[0].startTime.replace(/-/g, '/')).getTime()
          let endTime = new Date(res.data.contentList[0].endTime.replace(/-/g, '/')).getTime()

          if (nowTime >= opentime) {
            this.taskStatus = '已开始';
          } else if (opentime > nowTime) {
            this.taskStatus = '未开始';
          }

          if (nowTime >= endTime) {
            this.openType = ''
          } else {
            if ((endTime - nowTime) < 600000 && (endTime - nowTime) > 0) {
              setTimeout(() => {
                this.openType = ''
              }, endTime - nowTime)
            }
            this.openType = 'share'
          }
          if (nowTime < opentime && this.tipText !== '活动尚未开始，请留意活动时间') {
            this.showDialog = true
            this.tipText = '活动尚未开始，请留意活动时间'
            this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '抽签任务', 'popup_name': '抽签任务未开始'})
          } else if (nowTime >= opentime && res.data.contentList[0].isClear) {
            this.tipText = '本场不凡甄选活动结束后参与次数自动清零'
          } else if (nowTime >= opentime && !res.data.contentList[0].isClear) {
            this.tipText = ''
          }
          this.startTime = this.formatDate(res.data.contentList[0].startTime)
          this.endTime = this.formatDate(res.data.contentList[0].endTime)

          let diffTime = 28800000; //8小时
          let start_time = opentime - diffTime;
          let end_time = endTime - diffTime;

          let eventName = "c_ebmp_drawstask_center";
          let trackParams = {
            "c_from": this.previewpage + this.prevpagetitle,
            "c_drawstask_campaign_id": res.data.contentList[0].taskCenterCode,
            "c_drawstask_campaign_name": res.data.contentList[0].taskCenterName,
            "c_drawstask_campaign_state": this.taskStatus,
            "c_drawstask_start_time": util.timeFormat(start_time),
            "c_drawstask_end_time": util.timeFormat(end_time)
          }

          getApp().commonClTrack(eventName, trackParams);

          if (res.data.contentList) {
            res.data.contentList[0].content.map((item) => {
              if (item.taskContentType == "InviteFriends") {
                taskContentId = item.taskContentId
              }
              if (item.taskContentStatus == 1) {
                item.buttonText = '未开始'
                item.buttonColor = 'grey'
              } else if (item.taskContentStatus == 2) {
                item.buttonText = '立即领取'
              } else if (item.taskContentStatus == 3) {
                item.buttonText = '去完成'
              } else if (item.taskContentStatus == 4) {
                item.buttonText = '已完成'
                item.buttonColor = 'success'
              } else if (item.taskContentStatus == 5) {
                item.buttonText = '已结束'
                item.buttonColor = 'success'
              }
            })
            this.taskList = [...res.data.contentList[0].content]
            this.taskCenterCode = res.data.contentList[0].taskCenterCode
          }
          this.taskInfo = res.data
          if (!!taskContentId) {
            this.sceneCode = this.taskCenterCode + '-' + taskContentId
            this.getInvitedFriends(taskContentId)
          }
          setTimeout(() => {
            this.showLoaded = false
          }, 800)
        } else {
          this.showLoaded = false
        }
      },
      formatDate(date) {
        let data = date.replace('-', '年').replace('-', '月').replace(' ', '日 ')
        return data
      },
      handleTask(item) {
        let nowTime = new Date().getTime()
        let endTime = new Date(this.taskInfo.contentList[0].endTime.replace(/-/g, '/')).getTime()
        let opentime = new Date(this.taskInfo.contentList[0].startTime.replace(/-/g, '/')).getTime()
        if (nowTime >= endTime) {
          this.handleShowTextToast(`本次不凡甄选任务已结束，期待您下次参与`)
          return false
        }

        let diffTime = 28800000; //8小时
        let start_time = opentime - diffTime;
        let end_time = endTime - diffTime;
        let eventName = "c_ebmp_drawstask_center_click";
        let trackParams = {
          "c_area": item.taskContentName,
          "c_drawstask_campaign_id": this.taskInfo.contentList[0].taskCenterCode,
          "c_drawstask_campaign_name": this.taskInfo.contentList[0].taskCenterName,
          "c_drawtask_id": item.taskContentId,
          "c_drawtask_name": item.taskContentName,
          "c_drawtask_start_time": util.timeFormat(start_time),
          "c_drawtask_end_time": util.timeFormat(end_time),
          "c_link_pagename": "",
          "c_link_path": "",
        };

        if (item.taskContentStatus == 2) { //立即领取
          this.finishTask(item.taskContentId, item.taskContentName, 0)
        } else if (item.taskContentStatus == 3 && item.taskContentType == "SharePage") { //去完成
          let url;
          if (api.environment == 'formal') {
            url = '/pages/item/search?cateCode=16730&title=不凡甄选&navId=9398&type=task'
          } else if (api.environment == 'trial') {
            url = '/pages/item/search?cateCode=7962&title=不凡甄选&navId=4503&type=task'
          }

          trackParams.c_link_pagename = "不凡甄选";
          trackParams.c_link_path = url;

          getApp().commonClTrack(eventName, trackParams);
          uni.navigateTo({
            url: url
          })
        } else if (item.taskContentStatus == 3 && item.taskContentType == "Scan") {
          trackParams.c_link_pagename = item.taskContentStatement;
          trackParams.c_link_path = '/pages/cms/page?identifier=' + item.path + '&type=scantask';

          getApp().commonClTrack(eventName, trackParams);
          uni.navigateTo({
            url: '/pages/cms/page?identifier=' + item.path + '&type=scantask'
          })
        }
      },
      async getInvitedFriends(taskContentId) {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let memberDetails = uni.getStorageSync('memberDetails');
        const res = await api.getInvitedFriends({
          method: 'GET',
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            taskCenterCode: this.taskCenterCode,
            taskContentId: taskContentId
          }
        })
        if (res.code === 1000) {
          let friendList = []
          res.data && res.data.map((item, index) => {
            if (!item) {
              res.data.splice(index)
            } else {
              friendList.push(item.wxAvatarUrl)
            }
          })

          this.friendList = friendList
        }
      },

      trackTaskClick(area, url = "") {
        let eventName = "c_ebmp_drawstask_center_click";
        let trackParams = {
          "c_area": area,
          "c_drawstask_campaign_id": this.taskInfo.contentList[0].taskCenterCode,
          "c_drawstask_campaign_name": this.taskInfo.contentList[0].taskCenterName,
          "c_link_pagename": "",
          "c_link_path": "",
        };
        trackParams.c_link_pagename = area;
        if (area == '任务记录') {
          trackParams.c_link_path = "pages/taskCenter/taskList";
        } else if (area == '任务规则') {
          trackParams.c_link_path = "pages/cms/page?identifier=cms/taskRule";
        } else if (area == '即刻参与不凡甄选活动') {
          trackParams.c_link_path = url;
        }
        getApp().commonClTrack(eventName, trackParams);
      },
      // 完成任务
      async finishTask(taskContentId, taskContentName, isInvite) {
        let flag = await getApp().finishTask(this.taskCenterCode, taskContentId, taskContentName, isInvite)
        if (!isInvite) {
          this.getTaskInfo()
        }
      },
      skipRecord() {
        this.trackTaskClick("任务记录")
        uni.navigateTo({
          url: '/pages/taskCenter/taskList'
        })
      },
      async skipTaskRule() {
        this.trackTaskClick("任务规则")
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const res = await api.getTaskRule({
          method: 'GET',
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            code: this.taskCenterCode
          }
        });
        if (res.code === 1000) {
          let identifier = res.data || 'cms/taskRule'
          if (!!identifier) {
            uni.navigateTo({
              url: '/pages/cms/page?identifier=' + identifier
            })
          }
        }
      },
      shareCard() {
        let nowTime = new Date().getTime()
        let endTime = new Date(this.taskInfo.contentList[0].endTime.replace(/-/g, '/')).getTime()
        if (nowTime >= endTime) {
          this.openType = ''
          this.handleShowTextToast('本次不凡甄选任务已结束，期待您下次参与')

          return false
        } else {
          this.$nextTick(() => {
            this.openType = 'share'
          })
        }
      },
      skipDraw() {
        let url;
        if (api.environment == 'formal') {
          url = '/pages/item/search?cateCode=16730&title=不凡甄选&navId=9398'
        } else if (api.environment == 'trial') {
          url = '/pages/item/search?cateCode=7962&title=不凡甄选&navId=4503'
        }
        this.trackTaskClick("即刻参与不凡甄选活动", url)

        if (!!url) {
          uni.navigateTo({
            url: url
          })
        }
      },
      async onShareAppMessage(res) {
        let sharePath, shareImageUrl, pageTitle;
        this.$commonSensors.sensorsPageShare()
        if (res.from == "button") {
          let type = res.target.dataset.type
          let taskContentId = res.target.dataset.taskcontentid
          let taskContentName = res.target.dataset.taskcontentname
          let path = res.target.dataset.path

          let endTime = new Date(this.taskInfo.contentList[0].endTime.replace(/-/g, '/')).getTime()
          let opentime = new Date(this.taskInfo.contentList[0].startTime.replace(/-/g, '/')).getTime()

          let diffTime = 28800000; //8小时
          let start_time = opentime - diffTime;
          let end_time = endTime - diffTime;

          let eventName = "c_ebmp_drawstask_center_click";
          let trackParams = {
            "c_area": taskContentName,
            "c_drawstask_campaign_id": this.taskInfo.contentList[0].taskCenterCode,
            "c_drawstask_campaign_name": this.taskInfo.contentList[0].taskCenterName,
            "c_drawtask_id": taskContentId,
            "c_drawtask_name": taskContentName,
            "c_drawtask_start_time": util.timeFormat(start_time),
            "c_drawtask_end_time": util.timeFormat(end_time),
            "c_link_pagename": "",
            "c_link_path": "",
          };

          if (type == 'ShareMini') {
            this.finishTask(taskContentId, taskContentName, 0)
          } else if (type == 'InviteHelp' || type == 'InviteFriends') {
            this.finishTask(taskContentId, taskContentName, 1)
          }
          let memberCode = uni.getStorageSync('memberCode');
          let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
          let memberDetails = uni.getStorageSync('memberDetails');
          if (!memberCode) {
            const memberCodeData = await api.memberCode({
              method: 'GET',
              header: {
                'jwt': customerInfo.jwt
              },
            })
            if (memberCodeData.code === 1000) {
              memberCode = memberCodeData.data.memberCode;
              uni.setStorageSync('memberCode', memberCode);
              if (type == 'ShareMini') {
                sharePath = path || '/pages/home/home'
                shareImageUrl = this.shareImage || ''
                pageTitle = this.shareTitle || uni.getStorageSync('storeName');
              } else if (type == 'InviteHelp') {
                let params = {
                  shareMemberId: memberDetails.memberId,
                  taskCenterCode: this.taskCenterCode,
                  taskContentId: taskContentId,
                  taskContentName: taskContentName,
                  fromMobile: customerInfo.mobile,
                  fromUnionId: customerInfo.unionId,
                  fromCustomerId: customerInfo.customerId
                }
                sharePath = '/pages/home/home?type=taskHelp' + '&params=' + encodeURIComponent(JSON.stringify(
                  params));

                shareImageUrl = this.shareHelpImage;
                pageTitle = this.shareHelpTitle || uni.getStorageSync('storeName');
              } else {
                sharePath = '/pages/home/home?shareMemberCode=' + memberCode + '&sceneCode=' + this.sceneCode +
                  '&type=taskInvite';
                shareImageUrl = this.shareFriendImage;
                pageTitle = this.shareFriendTitle || uni.getStorageSync('storeName');
              }

              trackParams.c_link_pagename = pageTitle;
              trackParams.c_link_path = sharePath;
              getApp().commonClTrack(eventName, trackParams);

              return this.$commonFunction.commonShare(res, pageTitle, sharePath, shareImageUrl)
            }
          } else {
            if (type == 'ShareMini') {
              sharePath = path || '/pages/home/home'
              shareImageUrl = this.shareImage || ''
              pageTitle = this.shareTitle || uni.getStorageSync('storeName');
            } else if (type == 'InviteHelp') {
              let params = {
                shareMemberId: memberDetails.memberId,
                taskCenterCode: this.taskCenterCode,
                taskContentId: taskContentId,
                taskContentName: taskContentName,
                fromMobile: customerInfo.mobile,
                fromUnionId: customerInfo.unionId,
                fromCustomerId: customerInfo.customerId
              }

              sharePath = '/pages/home/home?type=taskHelp' + '&params=' + encodeURIComponent(JSON.stringify(params));
              shareImageUrl = this.shareHelpImage;
              pageTitle = this.shareHelpTitle || uni.getStorageSync('storeName');
            } else {
              sharePath = '/pages/home/home?shareMemberCode=' + memberCode + '&sceneCode=' + this
                .sceneCode + '&type=task';
              shareImageUrl = this.shareFriendImage || '';
              pageTitle = this.shareFriendTitle || uni.getStorageSync('storeName');
            }

            trackParams.c_link_pagename = pageTitle;
            trackParams.c_link_path = sharePath;
            getApp().commonClTrack(eventName, trackParams);

            return this.$commonFunction.commonShare(res.from, pageTitle, sharePath, shareImageUrl)
          }
        } else {
          sharePath = '/pages/home/home';
          shareImageUrl = this.shareDefaultImage;
          pageTitle = this.shareDefaultTitle || uni.getStorageSync('storeName');
          return this.$commonFunction.commonShare(res, pageTitle, sharePath, shareImageUrl)
        }
      }
    }
  }
</script>

<style lang="scss">
  page,
  .task-center,
  .task-container {
    width: 100%;
    height: 96%;
    background-color: #F6F6F4;

    .task-container {
      background: #F6F6F4;
      display: flex;
      flex-direction: column;
    }

    .times {
      height: 284rpx;
      opacity: 0.92;
      position: relative;
      padding: 74rpx 92rpx 52rpx;
      background: linear-gradient(132deg, #41413F 0%, #1A1A1A 100%);

      .time-data {
        display: flex;
        justify-content: space-between;

        .content {
          text-align: center;

          .text {
            color: #fff;
            font-size: 30rpx;
          }

          .num {
            padding-top: 16rpx;
            color: #fff;
            font-size: 40rpx;
            font-weight: bold;
          }
        }
      }

      .tip {
        display: flex;
        align-items: center;
        padding-top: 14rpx;
        color: #fff;
        font-size: 24rpx;
        justify-content: center;

        image {
          width: 26rpx;
          height: 26rpx;
          margin-right: 8rpx;
        }
      }

      .task-record {
        position: absolute;
        right: 0;
        top: 16rpx;
        width: 158rpx;
        height: 42rpx;
        display: flex;
        align-items: center;
        padding-left: 12rpx;
        color: #1A1A1A;
        font-size: 22rpx;
        background: #fff;
        border-radius: 21px 0px 0px 21px;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-top: 2prx;
          margin-right: 10rpx;
        }

        text {
          padding-bottom: 3rpx;
        }
      }
    }


    .task-list {
      z-index: 2;
      margin: -40rpx auto;
      width: 696rpx;
      background: #fff;
      padding: 36rpx 36rpx 0;
      box-shadow: 4px 4px 12px 1px rgba(0, 0, 0, 0.05);

      .title {
        .top {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: 22rpx;

          .left {
            font-size: 36rpx;
            color: #333333;
            font-weight: bold;
          }

          .right {
            font-size: 24rpx;
            line-height: 24rpx;
            color: #666666;
            border-bottom: 1px #666666 solid;
          }
        }

        .bottom {
          text {
            color: #333;
            font-size: 22rpx;
            white-space: nowrap;

          }
        }
      }

      .list-content:last-of-type {
        border: none
      }

      .list-content {
        margin-left: 5rpx;
        height: 182rpx;
        border-bottom: 1px #E6E6E6 solid;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 120rpx;

          image {
            width: 56rpx;
          }
        }

        .center {
          padding: 45rpx 20rpx 0;
          flex: 1;

          .task-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            max-height: 80rpx;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .task-des {
            font-size: 22rpx;
            color: #999;
          }

          .friend-list {
            display: flex;

            .empty {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              margin-right: 12rpx;
              overflow: hidden;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .avatar-icon {
              width: 46rpx;
              height: 46rpx;
              border-radius: 50%;
              margin-right: 12rpx;
              // border: 1px solid #AEAEAE;
              overflow: hidden;

              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        .right {
          width: 114rpx;
          display: flex;
          align-items: center;

          .task-operate {
            flex: 1;
            height: 24px;
            background: #333;
            font-size: 24rpx;
            color: #fff;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            &.success {
              background: none;
              color: #666666;
            }

            &.grey {
              background: #AEAEAE;
              color: #fff;
            }
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    z-index: 88;

    .footer_btn {
      height: 110rpx;
      background-color: #010101;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #fff;
    }

  }

  .fix-iphonex-button {
    bottom: 0 !important;
    padding-bottom: 40rpx;
  }

  .topView {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.64);

    .container {
      box-shadow: 0px 0px 6px 2px #333;
      position: absolute;
      top: 40%;
      width: 520rpx;
      height: 340rpx;
      background: #fff;
      margin: auto;
      left: 0;
      right: 0;

      .close {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        top: 12rpx;
        right: 14rpx;
        line-height: 40rpx;
        font-size: 48rpx;
        text-align: center;
      }

      .text {
        font-size: 28rpx;
        line-height: 45rpx;
        margin-top: 80rpx;
        margin: 46rpx 65rpx 90rpx;
      }

      .checkBtnBox {
        margin: 0 48rpx;
        display: flex;
        justify-content: center;

        .btn {
          width: 196rpx;
          height: 68rpx;
          line-height: 68rpx;

          &.submit {
            color: #fff;
            background: #000;
          }
        }
      }
    }
  }
</style>
